<FlexboxLayout flexDirection="column" sdkExampleTitle sdkToggleNavButton>
    <Label text="The custom *sdkUnless directive will execute the block if the condition is False (the opposite of *ngIf)" textWrap="true" class="p-15"></Label>

    <StackLayout class="form">
        <StackLayout class="input-field">
            <Label text="Enter age:" class="label" ></Label>
            <TextField [(ngModel)]="age" class="input input-border"></TextField>
        </StackLayout>
    </StackLayout>

    <Button text="Check Access" (tap)="onTap($event)" class="btn btn-primary btn-active"></Button>

    <!-- >> unless-directive-html -->
    <GridLayout *sdkUnless="condition" width="150" height="150" margin="30" borderRadius="125" backgroundColor="green">
        <Label text="Access granted!" class="p-15" color="white" textWrap="true" horizontalAlignment="center" verticalAlignment="center"></Label>
    </GridLayout>
    <GridLayout *sdkUnless="!condition" width="150" height="150" margin="30" borderRadius="125" backgroundColor="red">
        <Label text="Access not granted!" class="p-15" color="white" textWrap="true" horizontalAlignment="center" verticalAlignment="center"></Label>
    </GridLayout>
    <!-- << unless-directive-html -->
</FlexboxLayout>